<template>
  <div class="bookList">
    <div class="return" @click="toReturn()">
      <van-icon name="arrow-left" size="20" color="grey" />
    </div>
    <!-- <van-nav-bar title="预约记录" left-arrow @click-left="onClickLeft" /> -->
    <!-- <van-tabs v-model="active" title-active-color="#098570" @change="change"> -->
    <!-- <van-tab title="全部订单"> -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div
          class="list"
          v-for="(item, index) in lists"
          :key="index"
          :class="item.status == 0 ? 'name_S1' : 'name_S2'"
        >
          <div class="time" :class="item.status == 0 ? 'status1' : 'status2'">
            预约时间：{{ item.apply_date }} {{ item.apply_time }}
          </div>
          <div class="name">预约人：{{ item.realname }}</div>
          <div>
            预约状态：
            <span class="status1" v-if="item.status == 0">预约成功</span>
            <span class="status2" v-else>预约已失效</span>
          </div>
          <div
            class="name cultural_center"
            v-if="item.cultural_center"
            :class="item.cultural_center.id == 2 ? 'name1' : 'name2'"
          >
            预约场馆：
            <span>
              {{ item.cultural_center.name }}
            </span>
          </div>
          <div class="flex align btns">
            <div
              class="more-btn cancel"
              v-if="item.status == 0"
              @click="toCancel(item.id)"
            >
              取消预约
            </div>
            <div class="more-btn" @click="toInfo(item.id)">查看详情</div>
          </div>
        </div>
        <div class="zan" v-if="zanS">{{ zan }}</div>
      </van-list>
    </van-pull-refresh>
    <!-- </van-tab> -->
    <!-- <van-tab title="有效订单">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <div
              class="list"
              @click="toInfo(item.id)"
              v-for="(item, index) in lists"
              :key="index"
            >
              <div
                class="time"
                :class="item.status == 0 ? 'status1' : 'status2'"
              >
                预约时间：{{ item.apply_date }} {{ item.apply_time }}
              </div>

              <div class="name">预约人：{{ item.realname }}</div>
              <div>
                预约状态：
                <span class="status1" v-if="item.status == 0">预约成功</span>
                <span class="status2" v-else>预约已失效</span>
              </div>
              <div class="more-btn"><span>查看详情</span></div>
            </div>
            <div class="zan" v-if="zanS2">{{ zan }}</div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="失效订单">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <div
              class="list"
              @click="toInfo(item.id)"
              v-for="(item, index) in lists"
              :key="index"
            >
              <div
                class="time"
                :class="item.status == 0 ? 'status1' : 'status2'"
              >
                预约时间：{{ item.apply_date }} {{ item.apply_time }}
              </div>

              <div class="name">预约人：{{ item.realname }}</div>
              <div>
                预约状态：
                <span class="status1" v-if="item.status == 0">预约成功</span>
                <span class="status2" v-else>预约已失效</span>
              </div>
              <div class="more-btn"><span>查看详情</span></div>
            </div>
            <div class="zan" v-if="zanS3">{{ zan }}</div>
          </van-list>
        </van-pull-refresh>
      </van-tab> -->
    <!-- </van-tabs> -->
  </div>
</template>
<script>
import {
  NavBar,
  Tab,
  Tabs,
  Loading,
  PullRefresh,
  List,
  Dialog,
  Toast,
  Icon,
} from "vant";
import {
  appointmentQuery,
  culturalDetail,
  appointmentCancel,
} from "@/api/apiData";
import { mapState } from "vuex";
export default {
  components: {
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Loading.name]: Loading,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      active: "0",
      zan: "暂无数据",
      zanS: false,
      zanS2: false,
      zanS3: false,
      page: 0, //当前页码
      offset: 12, //当前页面条目数
      totalPages: 1, //总页码
      lists: [], //文章数组
      loading: false,
      finished: false,
      refreshing: false,
      status: "",
      nameCul: "",
      formatter: (day) => {
        const year = day.date.getFullYear();
        const month = day.date.getMonth() + 1;
        const date = day.date.getDate();
        const dateString = `${year}-${month >= 10 ? month : "0" + month}-${
          date >= 10 ? date : "0" + date
        }`;
        if (disabledDays.includes(dateString)) {
          day.type = "disabled";
        }
        return day;
      },
    };
  },
  mounted() {
    let id = this.$route.query.id;
    window.document.title = "预约记录";
    // culturalDetail({ cultural_center_id: id }).then((res) => {
    //   if (res.code == 1) {
    //     this.nameCul = res.data.name;
    //   }
    // });
  },
  computed: {
    ...mapState(["globalData"]), // 映射this.globalData到store中的globalData
  },
  methods: {
    toReturn() {
      window.history.go(-1);
    },
    // 取消预约
    toCancel(id) {
      let that = this;
      Dialog.confirm({
        title: "提示",
        message: "确定要取消预约吗？",
      })
        .then(() => {
          // on confirm
          appointmentCancel({ id: id }).then((res) => {
            if (res.code == 1) {
              Toast.success(res.msg);
              that.onRefresh();
            } else {
              Toast.fail(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    change(e) {
      console.log(e);
      if (e == 1) {
        this.status = 0;
      } else if (e == 2) {
        this.status = -1;
      } else {
        this.status = "";
      }
      this.onRefresh();
    },
    getList() {
      var that = this;
      that.zanS = false;
      var page = that.page + 1;
      var lists = that.lists;
      var totalPages = that.totalPages;
      var offset = that.offset;
      var status = that.status;
      let obj = {
        page: page,
        size: offset,
        status: status,
      };
      if (totalPages >= page) {
        appointmentQuery(obj).then((res) => {
          if (res.code == 1) {
            that.page = page;
            that.lists = lists.concat(res.data.list);
            that.totalPages = Math.ceil(
              Number(res.data.total) / res.data.length
            );
            if (res.data.list.length == 0) {
              if (status == "") {
                that.zanS = true;
              }
              if (status == 0) {
                that.zanS2 = true;
              }
              if (status == -1) {
                that.zanS3 = true;
              }
              //数据请求成功 但是无数据
              that.finished = true;
              that.loading = false;
              return false;
            }
            console.log(that.lists.length);
            console.log(lists.length);

            if (that.lists.length >= lists.length) {
              // 数据请求成功后  停止加载状态
              setTimeout(() => {
                that.loading = false;
              }, 1500);
            }
          }
        });
      } else {
        // 全部数据加载完毕
        that.finished = true;
      }
    },
    // 上拉记载
    onLoad() {
      var logins = localStorage.getItem("logins");
      if (logins == 2) {
        setTimeout(() => {
          this.getList();
        }, 500);
      }
      setTimeout(() => {
        this.getList();
      }, 500);
    },
    // 下拉刷新
    onRefresh() {
      var that = this;
      that.lists = [];
      that.page = 0;
      that.offset = 12;
      that.totalPages = 1;
      that.loading = false;
      that.finished = false;
      that.value = "";
      that.getList();
      setTimeout(() => {
        that.refreshing = false;
      }, 1500);
    },
    onClickLeft() {
      let id = this.$route.query.id;
      this.$router.replace({
        path: "/mine",
        query: {
          id: id,
        },
      });
      // this.$router.replace("/mine");
    },
    toIndex(n) {
      let id = this.$route.query.id;
      this.$router.replace({
        path: "/index",
        query: {
          id: id,
          active: n,
        },
      });
    },
    toInfo(id) {
      let idR = this.$route.query.id;
      this.$router.replace({
        path: "/info",
        query: {
          id: id,
          idR: idR,
        },
      });
    },
  },
};
</script>
<style scoped>
.return {
  position: absolute;
  left: 0;
  top: 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0 10px 10px 0;
  padding: 5px 10px 5px 5px;
  z-index: 2;
  font-size: grey;
  box-shadow: 1px 2px 1px 1px gainsboro;
}
.btns {
  justify-content: flex-end;
}
.bookList {
  /* background: #f4f6f8; */
  padding-bottom: 100px;
  padding-top: 30px;
}
.list {
  background: white;
  margin: 5px 0;
  padding: 10px 20px;
  line-height: 2;
  font-size: 12px;
  color: #464646;
  border-bottom: solid 1px gainsboro;
}
.time {
  color: #12d5b4;
  font-weight: bold;
  font-size: 14px;
}
.name1 {
  font-weight: bold;
  color: #0f75a5;
}

.name2 {
  font-weight: bold;
  color: #2d773d;
}
.name_S2 .cultural_center {
  color: gray;
}
.more-btn {
  text-align: right;
  color: white;
  background: #12d5b4;
  padding: 2px 10px;
  border-radius: 5px;
}
.cancel {
  margin-right: 10px;
  background: rgb(224, 78, 78);
}
.status1 {
  color: #11bb9f;
  font-weight: bold;
}
.status2 {
  color: gray;
  font-weight: bold;
}
.status2 span {
  color: gray;
}
.zan {
  text-align: center;
  color: gray;
  font-size: 14px;
  line-height: 3;
}
</style>